热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Webpack初探:Import和Require的使用

本文介绍了Webpack中Import和Require的基本概念和使用方法,帮助读者更好地理解和应用模块化开发。

前言:本文由编程笔记小编整理,旨在介绍 Webpack 中 Import 和 Require 的相关知识,希望对您有所帮助。


传统 Javascript 的引入方式

在过去,Javascript 文件通常按功能划分,并在 HTML 页面中通过 script 标签引入。这种方法要求开发者手动管理文件的引入顺序,确保依赖关系正确。随着前端工程的发展,模块化概念逐渐普及,使得前端开发更加规范和高效。


1. Export

每个 Javascript 文件可以视为一个模块,该模块可以被其他模块引入。引入后的结果是对该模块的执行结果进行封装。然而,模块内部的私有变量和函数不会自动暴露给外部,因此需要使用 export 关键字来决定模块对外公开的内容。

export 用于从模块中导出函数、对象或原始值,以便其他模块通过 import 语句使用这些内容。

例如,在 module1.js 中:

function fun1() {
console.log('module - 1 : function 1');
}
let person = {
name: '张三'
};
let str = '我是module1定义的字符串';
export { fun1, person, str };

在 main.js 中引入并使用这些导出的内容:

import * as module1 from './module1.js';
console.log(module1);

此时,module1 对象包含了 fun1、person 和 str,可以通过 module1 访问这些内容。

export 导出的内容会被添加到模块对象中,可以理解为深拷贝。


2. Export Default

初学者可能会疑惑,已经有了 export 为什么还需要 export default?实际上,export default 是为了提供一个默认的导出接口。

修改 module1.js:

function f1() {
console.log('module - 1 : function 1');
}
let b = {
name: 'test_obj'
};
let str = 'hello';
export { f1, b, str };
export default {
name: 'default'
};

export default 的作用是给模块对象添加一个 default 属性,该属性的值是一个对象,与 export default 导出的内容完全一致。


3. 文件导出总结

一个 Javascript 文件被当作模块引入时,会暴露为一个对象。export 用于在该对象中添加属性,export default 用于设置对象的 default 属性。


4.1 导出整个文件对象

使用 import * 语法可以导入模块的所有接口,并通过 as 指定一个命名空间对象。例如:

import * as m1 from './m1.js';
console.log(m1);

m1 命名空间对象可以访问模块的所有对外接口,包括 export 和 export default 的内容。


4.2 导出部分接口

在实际开发中,我们可能只需要导入模块的部分接口。通过在 import 语句中解构模块对象,可以实现这一点:

import { f1, b } from './m1.js';
console.log(f1);
console.log(b);

注意,默认导出的接口无法通过这种方式直接解构,因为 default 是关键字,不能作为变量名使用。


4.3 导入默认接口

默认导出的接口可以通过 import 语句直接导入,例如:

import d from './m1.js';
console.log(d);

此时,d 就是模块对象的 default 属性值,即 export default 导出的内容。


5. 动态导入

import 不仅是一个关键字,还是一个函数,可以异步加载模块。函数的参数是模块路径,返回一个 Promise 对象:

import('./m1.js').then(m => {
console.log('then:', m);
});

在 then 回调中,m 是模块的整个对象,包括 export 和 export default 的内容。


6. 仅作为副作用导入

import 还可以仅执行模块中的代码,而不导入任何接口。例如,在 Vue 项目中,我们可以在 init.js 文件中编写初始化逻辑,然后在 main.js 中直接引入:

import './lib/init.js';

这样做可以保持 main.js 文件的简洁,同时实现模块化管理。


推荐阅读
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 本文详细介绍了Java中org.neo4j.helpers.collection.Iterators.single()方法的功能、使用场景及代码示例,帮助开发者更好地理解和应用该方法。 ... [详细]
  • 本文详细介绍如何使用Python进行配置文件的读写操作,涵盖常见的配置文件格式(如INI、JSON、TOML和YAML),并提供具体的代码示例。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • CentOS7源码编译安装MySQL5.6
    2019独角兽企业重金招聘Python工程师标准一、先在cmake官网下个最新的cmake源码包cmake官网:https:www.cmake.org如此时最新 ... [详细]
  • 本文详细介绍了 Dockerfile 的编写方法及其在网络配置中的应用,涵盖基础指令、镜像构建与发布流程,并深入探讨了 Docker 的默认网络、容器互联及自定义网络的实现。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 2023 ARM嵌入式系统全国技术巡讲旨在分享ARM公司在半导体知识产权(IP)领域的最新进展。作为全球领先的IP提供商,ARM在嵌入式处理器市场占据主导地位,其产品广泛应用于90%以上的嵌入式设备中。此次巡讲将邀请来自ARM、飞思卡尔以及华清远见教育集团的行业专家,共同探讨当前嵌入式系统的前沿技术和应用。 ... [详细]
  • 本文总结了2018年的关键成就,包括职业变动、购车、考取驾照等重要事件,并分享了读书、工作、家庭和朋友方面的感悟。同时,展望2019年,制定了健康、软实力提升和技术学习的具体目标。 ... [详细]
  • 资源推荐 | TensorFlow官方中文教程助力英语非母语者学习
    来源:机器之心。本文详细介绍了TensorFlow官方提供的中文版教程和指南,帮助开发者更好地理解和应用这一强大的开源机器学习平台。 ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先,通过change事件监听用户选择的省份,并动态加载对应的城市列表。其次,详细讲解了使用Validation插件进行表单验证的方法,包括内置规则、自定义规则及实时验证功能。 ... [详细]
  • 本文详细介绍了如何使用 Yii2 的 GridView 组件在列表页面实现数据的直接编辑功能。通过具体的代码示例和步骤,帮助开发者快速掌握这一实用技巧。 ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • 使用 Azure Service Principal 和 Microsoft Graph API 获取 AAD 用户列表
    本文介绍了一段通用代码示例,该代码不仅能够操作 Azure Active Directory (AAD),还可以通过 Azure Service Principal 的授权访问和管理 Azure 订阅资源。Azure 的架构可以分为两个层级:AAD 和 Subscription。 ... [详细]
author-avatar
然后突然4_944
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有